<template>
  <div id="order">
    <div class="order-top">
      <div class="form-group">
        <span class="spanRed">*</span>供应商1：
        <el-autocomplete
          v-model="search"
          :fetch-suggestions="searchSuggestions"
          placeholder="请输入供应商名称"
          @select="handleSelect"
        >
          <template v-slot:default="{ item }">
            <div
              v-if="item.disabled"
              class="el-autocomplete-suggestion__item"
              style="color: #999"
            >
              暂无数据
            </div>
            <div v-else class="el-autocomplete-suggestion__item">
              {{ item.name }}
            </div>
          </template>
        </el-autocomplete>
        <el-button @click="dialogVisible = true">...</el-button>
      </div>
      <div class="form-group">
        <span class="spanRed">*</span>供应商2：
        <el-autocomplete
          v-model="search"
          :fetch-suggestions="searchSuggestions"
          placeholder="请输入供应商名称"
          @select="handleSelect"
        >
          <template v-slot:default="{ item }">
            <div
              v-if="item.disabled"
              class="el-autocomplete-suggestion__item"
              style="color: #999"
            >
              暂无数据
            </div>
            <div v-else class="el-autocomplete-suggestion__item">
              {{ item.name }}
            </div>
          </template>
        </el-autocomplete>
        <el-button @click="dialogVisible = true">...</el-button>
      </div>
      <div class="form-group">
        <span class="spanRed">*</span>供应商3：
        <el-autocomplete
          v-model="search"
          :fetch-suggestions="searchSuggestions"
          placeholder="请输入供应商名称"
          @select="handleSelect"
        >
          <template v-slot:default="{ item }">
            <div
              v-if="item.disabled"
              class="el-autocomplete-suggestion__item"
              style="color: #999"
            >
              暂无数据
            </div>
            <div v-else class="el-autocomplete-suggestion__item">
              {{ item.name }}
            </div>
          </template>
        </el-autocomplete>
        <el-button @click="dialogVisible = true">...</el-button>
      </div>
      <div class="form-group">
        <span class="demonstration">单据日期:</span>
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          style="margin-left: 10px"
        >
        </el-date-picker>
      </div>
      <div class="form-group">
        <span class="demonstration">报价截止日期:</span>
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          style="margin-left: 10px"
        >
        </el-date-picker>
      </div>
      <div class="form-group">
        <i class="el-icon-paperclip" style="color: blue"></i>
        <span style="color: blue">上传附件</span>
        <span style="margin-left: 10px">单据编号:</span>
        <el-input
          style="width: 120px; margin-left: 10px; margin-right: 20px"
          placeholder=""
          v-model="input"
          clearable
        >
        </el-input>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-edit"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>SKDYYYYMMDD</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <el-divider></el-divider>
    <div style="float: right; margin-bottom: 10px">
      <el-button type="primary">保存并新增</el-button>
      <el-button type="primary">保存</el-button>
      <el-button type="primary">导入</el-button>
    </div>

    <div class="order-content">
      <el-table
        :data="accounts"
        border
        style="width: 100%; font-size: 13px; margin-left: 20px"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column label="选中" width="50">
          <template slot-scope="scope">
            <el-radio v-model="selectedRow" :label="scope.row.id">{{
              a
            }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="accountCode" label="商品" width="300">
          <template slot="header" slot-scope="{ column }">
            <span class="spanRed">*</span> {{ column.label }}
          </template>
          <template slot-scope="scope">
            <el-input
              style="width: 200px"
              placeholder="商品"
              v-model="scope.row.accountCode"
            ></el-input
            ><el-button @click="dialogVisible2 = true">选择</el-button>
          </template>
        </el-table-column>

        <el-table-column label="商品图片" width="120">
          <template slot-scope="scope">
            {{ scope.row.productImage }}
          </template>
        </el-table-column>

                <el-table-column label="供应商1" width="120">
          <!-- 购货单价 -->
          <el-table-column label="购货单价" width="120">
            <template slot-scope="scope">
                <el-input v-model="scope.row.taxAmount" placeholder=""></el-input>
            </template>
          </el-table-column>
          <!-- 购货单价 -->
          <el-table-column label="购货总价" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.taxAmount" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="选择供应商" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.radio" label="1">选择</el-radio>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="供应商2" width="120">
           <!-- 购货单价 -->
          <el-table-column label="购货单价" width="120">
            <template slot-scope="scope">
                <el-input v-model="scope.row.taxAmount" placeholder=""></el-input>
            </template>
          </el-table-column>
          <!-- 购货单价 -->
          <el-table-column label="购货总价" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.taxAmount" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="选择供应商" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.radio" label="2">选择</el-radio>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="供应商3" width="120">
          <!-- 购货单价 -->
          <el-table-column label="购货单价" width="120">
            <template slot-scope="scope">
                <el-input v-model="scope.row.taxAmount" placeholder=""></el-input>
            </template>
          </el-table-column>
          <!-- 购货单价 -->
          <el-table-column label="购货总价" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.taxAmount" placeholder=""></el-input>
            </template>
          </el-table-column>

           <el-table-column label="选择供应商" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.radio" label="3">选择</el-radio>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 品牌 -->
        <el-table-column label="品牌" width="120">
          <template slot-scope="scope">
            {{ scope.row.brand }}
          </template>
        </el-table-column>

        <!-- 商品备注 -->
        <el-table-column label="商品备注" width="200">
          <template slot-scope="scope">
            {{ scope.row.productRemark }}
          </template>
        </el-table-column>

        <!-- 属性 -->
        <el-table-column label="属性" width="200">
          <template slot-scope="scope">
            {{ scope.row.attributes }}
          </template>
        </el-table-column>

        <!-- 单位 -->
        <el-table-column label="单位" width="100">
          <template slot-scope="scope">
            <el-select v-model="scope.row.unit" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <!-- 仓库 -->
        <el-table-column label="仓库" width="320">
          <template slot="header" slot-scope="{ column }">
            <span class="spanRed">*</span> {{ column.label }}
          </template>
          <template slot-scope="scope">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="dialogVisible3 = true"
            ></el-button>
            <el-select v-model="scope.row.warehouse" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <!-- 可用库存 -->
        <el-table-column label="可用库存" width="120">
          <template slot-scope="scope">
            {{ scope.row.availableStock }}
          </template>
        </el-table-column>

        <!-- 数量 -->
        <el-table-column label="数量" width="130">
          <template slot="header" slot-scope="{ column }">
            <span class="spanRed">*</span> {{ column.label }}
          </template>
          <template slot-scope="scope">
            <el-input
              style="width: 100px"
              placeholder="商品"
              v-model="scope.row.quantity"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 整件散包 -->
        <el-table-column label="整件散包" width="120">
          <template slot-scope="scope">
            {{ scope.row.packType }}
          </template>
        </el-table-column>

        <!-- 基本单位 -->
        <el-table-column label="基本单位" width="120">
          <template slot-scope="scope">
            {{ scope.row.unit }}
          </template>
        </el-table-column>

        <!-- 基本数量 -->
        <el-table-column label="基本数量" width="120">
          <template slot-scope="scope">
            {{ scope.row.baseQuantity }}
          </template>
        </el-table-column>

        <!-- 交货日期 -->
        <el-table-column label="报价截止日期" width="120">
          <template slot-scope="scope">
            <el-date-picker
              v-model="value2"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="scope.row.deliveryDate"
              style="margin-left: 10px"
            >
            </el-date-picker>
          </template>
        </el-table-column>

       
      </el-table>
    </div>
      <div>
      <el-input
        type="textarea"
        placeholder="备注"
        rows="2"
        v-model="text"
        style="width:100%;margin: 10px 0 0 10px">
      </el-input>
    </div>

    <div style="float: right; margin-top: 10px">
      <el-button @click="goto('priceComDoc')">历史单据</el-button>
    </div>

    <el-dialog title="选择供应商" :visible.sync="dialogVisible">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="类别">
          <el-select v-model="selectedCategory" placeholder="请选择类别">
            <el-option label="广东" value="广东"></el-option>
            <el-option
              label="酒水饮料供应商"
              value="酒水饮料供应商"
            ></el-option>
            <el-option label="食品供应商" value="食品供应商"></el-option>
            <el-option label="零食供应商" value="零食供应商"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchQuery"
            placeholder="输入编号/名称/联系人/电话查询"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="showDisabled">显示禁用供应商</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSuppliers">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="supplier" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="category"
          label="类别"
          width="120"
        ></el-table-column>
        <el-table-column prop="code" label="编号" width="120"></el-table-column>
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column
          prop="contact"
          label="联系人"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
          width="120"
        ></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button>新增供应商</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择商品" :visible.sync="dialogVisible2" width="900px">
      <div>
        <!-- 选项卡 -->
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="商品" name="products"></el-tab-pane>
          <el-tab-pane
            label="近期交易"
            name="recent-transactions"
          ></el-tab-pane>
        </el-tabs>

        <!-- 搜索区域 -->
        <div class="search-bar">
          <el-input
            style="width: 90px"
            placeholder="请输入商品编号/名称/型号/品牌"
            v-model="searchQuery"
          ></el-input>
          仓库：
          <el-select v-model="selectedWarehouse" placeholder="仓库">
            <el-option label="空" value=""></el-option>
            <!-- 其他仓库选项可以动态生成 -->
          </el-select>
          &nbsp;
          <el-checkbox v-model="zeroInventory">零库存商品</el-checkbox>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="常用商品;">常用商品</el-button>
        </div>

        <div class="content-wrapper">
          <el-row type="flex" justify="space-between">
            <el-col :span="16">
              <el-table :data="products" style="width: 700px">
                <el-table-column type="expand" label="图片" width="180">
                  <template slot-scope="scope">
                    <img :src="scope.row.imageUrl" alt="商品图片" style="width: 100%;">
                  </template>
                </el-table-column>
                <el-table-column prop="productNumber" label="商品编号"></el-table-column>
                <el-table-column prop="brand" label="品牌"></el-table-column>
                <el-table-column prop="origin" label="产地"></el-table-column>
                <el-table-column prop="auxiliaryAttributeNumber" label="辅助属性编号"></el-table-column>
                <el-table-column prop="productName" label="商品名称"></el-table-column>
                <el-table-column prop="specification" label="规格型号"></el-table-column>
                <el-table-column prop="category" label="商品类别"></el-table-column>
                <el-table-column prop="attributes" label="属性"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="basicStock" label="库存基本数"></el-table-column>
                <el-table-column prop="availableStock" label="可用库存"></el-table-column>
                <el-table-column prop="entryQuantity" label="录入数量"></el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
              </el-table>
            </el-col>
            <el-col :span="8" style="width: 200px">
              <el-tree
                :data="categories"
                :props="defaultProps"
                style="width: 100%"
              >
              </el-tree>
            </el-col>
          </el-row>
        </div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalProducts"
          >
          </el-pagination>
        </div>

        <!-- 操作按钮 -->
        <div class="actions">
          <el-button type="primary" @click="selectProduct">选中</el-button>
          <el-button @click="selectAndClose">选中并关闭</el-button>
          <el-button @click="closeDialog2">关闭</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
    title="商品库存查询"
    :visible.sync="dialogVisible3"
    width="30%">
    <div>
      <el-input
        v-model="productName"
        disabled
        placeholder="商品名称或编号">
      </el-input>

      <el-table
        :data="inventoryData"
        style="width: 100%">
        <el-table-column
          prop="warehouse"
          label="仓库名称">
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="数量">
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="4"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalItems">
        </el-pagination>
      </div>

      <div class="dialog-footer">
        <el-button type="primary" @click="confirm">确认</el-button>
        <el-button @click="closeDialog3">关闭</el-button>
      </div>
    </div>
  </el-dialog>

  </div>
</template>

<script>
export default {
  name: "order",
  data() {
    return {
      a: "",
      search: "",
      value: "",
      value2: "",
      input: "",
      selectedRow: "",
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogVisible: false,
      selectedCategory: "",
      searchQuery: "",
      showDisabled: false,
      supplier: [
        {
          category: "广东",
          code: "G00001",
          name: "商品综合批发有限公司",
          contact: "王",
          phone: "180****0000",
          remarks: "",
        },
        {
          category: "酒水饮料供应商",
          code: "G00002",
          name: "金小蝶食品贸易有限公司",
          contact: "管先生",
          phone: "188****7777",
          remarks: "",
        },
      ],
      dialogVisible3: false,
      productName: 'SP0001 巧克力',
      inventoryData: [
        { warehouse: '默认仓库', quantity: -59 },
        { warehouse: '冷藏库', quantity: 1000 },
        { warehouse: '食品库', quantity: 14 },
        { warehouse: '合计', quantity: 955 }
      ],
      currentPage: 1,
      totalItems: 1,
      dialogVisible2: false,
      activeTab: "products",
      searchQuery: "",
      selectedWarehouse: "",
      zeroInventory: false,
      products: [
        // 示例数据
        {
          imageUrl: 'path/to/image.jpg',
          productNumber: '001',
          brand: '品牌A',
          origin: '中国',
          auxiliaryAttributeNumber: 'AA001',
          productName: '商品A',
          specification: '规格A',
          category: '类别A',
          attributes: '属性A',
          unit: '单位A',
          basicStock: 100,
          availableStock: 80,
          entryQuantity: 50,
          remarks: '备注A'
        },
        // 更多商品...
      ],
      categories: [
        {
          label: "全部",
          children: [
            { label: "办公用品" },
            { label: "茶", children: [{ label: "绿茶" }] },
            {
              label: "酒类",
              children: [
                {
                  label: "红酒",
                  children: [{ label: "国产" }, { label: "进口" }],
                },
                { label: "啤酒" },
                { label: "葡萄酒" },
              ],
            },
            {
              label: "食品",
              children: [
                { label: "调味品" },
                { label: "进口食品" },
                { label: "零食" },
              ],
            },
            {
              label: "饮料",
              children: [
                { label: "果汁" },
                { label: "矿泉水" },
                { label: "乳品" },
              ],
            },
          ],
        },
        // 更多类别...
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentPage: 1,
      totalProducts: 142,
      options: [],
      suppliers: [
        { id: "G00001", name: "G00001 商品综合批发有限公司" },
        { id: "G00002", name: "G00002 金小蝶食品贸易有限公司" },
        { id: "G00003", name: "G00003 广州食品批发有限公司" },
        { id: "G00004", name: "G00004 深圳食品加工有限公司" },
        { id: "G00005", name: "G00005 食品零售供应商" },
      ],
      totalRow: {
        accountCode: "小计",
        quantity: 0,
        amount: 0,
      },
      accounts: [
        {
          id: "1",
          accountCode: "test1",
          ridio:3,
          accountName: "",
          warehouse: "默认仓库",
          availableStock: "100",
          quantity: "10",
          packType: "整件",
          unit: "件",
          baseQuantity: "10",
          deliveryDate: "2024-02-01",
          purchasePrice: "100",
          taxIncludedPrice: "105",
          discountRate: "10",
          discount: "折",
          discountAmount: "10",
          amount: "1000",
          taxRate: "10",
          taxAmount: "100",
          totalWithTax: "1100",
          remark: "默认备注",
          relatedSalesOrder: "SO001",
          notInStockQuantity: "5",
          productImage: "",
          brand: "品牌A",
          productRemark: "这是商品备注",
          attributes: "颜色: 红色; 尺寸: M",
          unit: "件",
        },
        {
          id: "1",
          accountCode: "test1",
          ridio:3,
          accountName: "",
          warehouse: "默认仓库",
          availableStock: "100",
          quantity: "10",
          packType: "整件",
          unit: "件",
          baseQuantity: "10",
          deliveryDate: "2024-02-01",
          purchasePrice: "100",
          taxIncludedPrice: "105",
          discountRate: "10",
          discount: "折",
          discountAmount: "10",
          amount: "1000",
          taxRate: "10",
          taxAmount: "100",
          totalWithTax: "1100",
          remark: "默认备注",
          relatedSalesOrder: "SO001",
          notInStockQuantity: "5",
          productImage: "",
          brand: "品牌A",
          productRemark: "这是商品备注",
          attributes: "颜色: 红色; 尺寸: M",
          unit: "件",
        },
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      text:'',
    };
  },
  methods: {
    searchSuggestions(queryString, cb) {
      if (typeof queryString === "string" && queryString.trim() !== "") {
        const results = this.suppliers.filter((supplier) =>
          supplier.name.toLowerCase().includes(queryString.toLowerCase().trim())
        );
        if (results.length === 0) {
          cb([{ name: "暂无数据", disabled: true }]);
        } else {
          cb(results);
        }
      } else {
        cb(this.suppliers);
      }
    },
    handleTabClick(tab) {
      console.log("当前选中的选项卡：", tab.name);
    },
    search() {
      // 执行搜索逻辑
      console.log(
        "搜索：",
        this.searchQuery,
        this.selectedWarehouse,
        this.zeroInventory
      );
    },
    常用商品() {
      // 执行常用商品逻辑
      console.log("常用商品");
    },
    handleSizeChange(size) {
      this.currentPage = 1; // 重置到第一页
      // 加载对应大小的数据
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      // 加载对应页的数据
    },
    selectProduct() {
      // 选中商品逻辑
      console.log("选中商品");
    },
    selectAndClose() {
      this.selectProduct();
      this.closeDialog2();
    },
    closeDialog2() {
      this.dialogVisible2 = false;
    },
    handleSelect(item) {
      if (!item.disabled) {
        this.search = item.name;
        console.log("Selected:", item);
      }
    },
    goto(to) {
      this.$router.push(to)
    },
    selectEmployee() {
      console.log("Add new supplier");
    },
    handleSearch() {
      // 在这里添加搜索逻辑
      console.log("搜索内容:", this.searchText);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      let values;

      columns.forEach((column, index) => {
        sums[index] = "";
        switch (index) {
          case 0:
            sums[index] = "合计";
            break;
          case 9: // 数量
          case 18: // 折扣额
          case 19: // 金额
          case 17: // 税率
          case 16: // 税额
          case 14: // 价税合计
          case 15: // 未入库数量
            values = data.map((item) => parseFloat(item[column.property]));
            sums[index] = values.reduce((prev, curr) => {
              const value = isNaN(curr) ? 0 : curr;
              return prev + value;
            }, 0);
            if (index === 15 || index === 16 || index === 17) {
              sums[index] += " 元";
            }
            break;
        }
      });

      return sums;
    },
    confirm() {
      // 确认按钮逻辑
      this.dialogVisible3 = false;
    },
    closeDialog3() {
      this.dialogVisible3 = false;
    },
  },
};
</script>

<style scoped>
#order {
  width: 100%;
  height: 100%;
}

.order-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: calc(100% - 20px);
  padding-left: 20px;
  font-size: 13px;
}

.custom-radio .el-radio__label {
  display: none;
}

.form-group {
  display: flex;
  align-items: center;
  margin-right: 20px; /* 组间距 */
  margin-top: 10px;
}

.el-autocomplete-suggestion__item {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-content {
  width: 100%;
}

.spanRed {
  color: rgb(255, 98, 93);
  margin-right: 8px;
}

.el-input,
.el-button {
  font-size: 13px;
}

.el-select,
.el-date-picker {
  margin-left: 10px;
}
</style>